<template>
	<div class="app-container">
		<el-form :model="formInline" ref="queryForm" size="small" :inline="true" label-width="180px"
			v-loading="loading">

			<div class="item">
				<div class="item-title">商品设置</div>
				<div class="item-content">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="商品评价:" prop="displayStatus">
								<!-- <el-input v-model="formInline.title" class="cell-input" placeholder="请输入商品类目名称" /> -->
								<div>
									<el-radio v-model="formInline.displayStatus" label="1">展示评价</el-radio>
									<el-radio v-model="formInline.displayStatus" label="0">隐藏评价</el-radio>
								</div>
								<div style="margin-top: 12px; font-size:12px; color: #999999;">
									在商品详情页对买家展示评价
								</div>
								<div style="margin-top: 12px;">
									<el-checkbox v-model="formInline.showFeedbackRate"
										@change="formInline.feedbackRate = ''">好评率大于等于
									</el-checkbox>
									<el-input v-model="formInline.feedbackRate" style="width: 60px;margin:0 8px;"
										:disabled="!formInline.showFeedbackRate" />
									<span>%时，展示评价</span>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="评价排序:" prop="evaluationRanking">
								<el-radio v-model="formInline.evaluationRanking" label="智能推荐排序">智能推荐排序</el-radio>
								<el-radio v-model="formInline.evaluationRanking" label="评价产生时间排序">评价产生时间排序</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</div>

			<div class="item">
				<div class="item-title">订单设置</div>
				<div class="item-content">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="优惠券名称:" prop="deductionMethod">
								<!-- <el-input v-model="formInline.title" class="cell-input" placeholder="请输入商品类目名称" /> -->
								<div>
									<el-radio v-model="formInline.deductionMethod" label="拍下减库存">拍下减库存</el-radio>
									<el-radio v-model="formInline.deductionMethod" label="付款减库存">付款减库存</el-radio>
								</div>
								<div style="margin-top: 12px; font-size:12px; color: #999999;">
									存在恶意占库存的风险，建议库存充足时选择
								</div>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="待付款订单取消时间:" prop="cancleTime">
								<div>
									<el-input v-model="formInline.cancleTime" style="width: 140px;">
										<template slot="append">分钟</template>
									</el-input>
								</div>
								<div style="margin-top: 12px; font-size:12px; color: #999999;">
									拍下未付款订单，在设置时间内自动取消订单
								</div>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="发货后自动确认收货时间:" prop="confirmTime">
								<div>
									<el-input v-model="formInline.confirmTime" style="width: 140px;">
										<template slot="append">天</template>
									</el-input>
								</div>
								<div style="margin-top: 12px; font-size:12px; color: #999999;">
									发货在设置时间时，自动确认收货。修改后将对新产生的订单立即生效，已产生的订单自动确认收货时间将在以发货时的设置为准。
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</div>


			<div class="item">
				<div class="item-title">首页商品展示</div>
				<div class="item-content">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="排序方式:" prop="title">
								<el-checkbox-group v-model="checkList">
									<vue-draggable v-model="formInline.ascOrDescList" chosen-class="chosen"
										force-fallback="true" animation="300" @end="handleSubmit">
										<transition-group>
											<div v-for="item in formInline.ascOrDescList" :key="item">
												<div style="display: inline-block;vertical-align: middle;width: 200px;">
													<el-checkbox :label="item.value" @change="item.sort = ''">
														{{item.label}}
													</el-checkbox>
												</div>
												<el-radio v-model="item.sort" label="desc"
													:disabled="checkList.toString().indexOf(item.value) == -1">降序
												</el-radio>
												<el-radio v-model="item.sort" label="asc"
													:disabled="checkList.toString().indexOf(item.value) == -1">升序
												</el-radio><i class="el-icon-sort"
													style="margin-left: 20px; font-size: 22px;vertical-align: middle;cursor: move;"></i>
											</div>
										</transition-group>
									</vue-draggable>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="更新频次:" prop="frequency">
								<el-input v-model="formInline.frequency" style="width: 140px;">
									<template slot="append">天</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label=" " prop="title">
								<el-button type="primary" @click="handleSubmit">修 改</el-button>
								<el-button @click="handleReset">重 置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</div>

		</el-form>
	</div>
</template>

<script>
	/** 
	 * 以id为1为主修改
	 * **/
	import {
		addWcGeneralConfiguration,
		findWcGeneralConfiguration,
		updataWcGeneralConfiguration
	} from "@/api/culturalCreativity/currency.js";
	export default {
		data() {
			return {
				checkList: [],
				loading: false,
				formInline: {}
			}
		},
		async created() {
			this.handleReset();
			let res = await findWcGeneralConfiguration(1);
			for (let i in this.formInline) {
				if (res.data[i]) {
					this.formInline[i] = res.data[i];
				}
			};
			if (this.formInline.feedbackRate) {
				this.formInline.showFeedbackRate = true;
			};
			if (this.formInline.ascOrDesc) {
				let list = this.formInline.ascOrDesc.split(',').map(item => item.split(" "));
				this.formInline.ascOrDescList = list.reduce((pev, item) => {
					let label = '',
						value = '',
						sort = '';
					this.formInline.ascOrDescList.forEach(_i => {
						if (_i.value == item[0]) {
							this.checkList.push(_i.value);
							value = _i.value;
							label = _i.label;
							sort = item[1];
						};
					});
					pev.push({
						label,
						value,
						sort
					})
					return pev;
				}, []);
			}
		},
		methods: {
			handleReset() {
				this.checkList = [];
				this.formInline = {
					displayStatus: "",
					feedbackRate: "",
					showFeedbackRate: false,
					evaluationRanking: "",
					cancleTime: "",
					frequency: "",
					confirmTime: "",
					ascOrDesc: "", //排序方式
					ascOrDescList: [{
							label: "商品发布时间",
							value: "from_onshow_time",
							sort: ""
						},
						{
							label: "商品点击量",
							value: "click_number",
							sort: ""
						},
						{
							label: "商品销量",
							value: "sales_number",
							sort: ""
						}
					], //排序列表
					deductionMethod: ""
				}
			},
			async handleSubmit() {
				try {
					// addWcGeneralConfiguration
					this.loading = true;
					let formInline = {
						...this.formInline
					};
					formInline.ascOrDesc = formInline.ascOrDescList.reduce((pev, item) => {
						if (this.checkList.toString().indexOf(item.value) != -1) {
							return `${pev},${item.value} ${item.sort}`
						} else {
							return pev;
						}
					}, '').replace(',', '');
					delete formInline.showFeedbackRate;
					delete formInline.ascOrDescList;
					formInline.id = 1;
					let res = await updataWcGeneralConfiguration(formInline);
					this.loading = false;
				} catch (e) {
					console.log('出错', e);
					this.loading = false;
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		padding-bottom: 100px;
	}

	.item {
		.item-title {
			margin-bottom: 30px;
			font-size: 24px;
			color: #666666;
			font-weight: bold;
		}

		.item-content {
			padding-left: 60px;
		}
	}

	.cell-input {
		width: 200px;
	}
</style>
